<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../static/image/favicon.png" type="image/png">
    <title>注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF4D4F',
                        dark: '#1E293B',
                        'dark-light': '#334155',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
            }
            .bg-gradient-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .animate-fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            .animate-slide-up {
                animation: slideUp 0.5s ease-out;
            }
            .animate-scale {
                transition: transform 0.3s ease;
            }
            .animate-scale:hover {
                transform: scale(1.05);
            }
            .auth-bg {
                background: linear-gradient(135deg, #1E293B, #165DFF);
            }
            .input-glass {
                background: rgba(255,255,255,0.05);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255,255,255,0.1);
            }
            .radio-primary:checked {
                background-color: #165DFF;
                border-color: #165DFF;
            }
            .radio-primary:focus {
                box-shadow: 0 0 0 3px rgba(22, 93, 255, 0.3);
            }
            .input-glass-radio {
                background: rgba(255,255,255,0.05);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255,255,255,0.1);
                transition: all 0.2s ease;
            }
            .input-glass-radio:hover {
                background: rgba(255,255,255,0.1);
            }
            .input-glass-radio-active {
                border-color: #165DFF;
                background: rgba(22, 93, 255, 0.1);
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
    </style>
</head>
<body class="font-inter bg-dark text-light antialiased">
<header id="navbar" class="fixed top-0 left-0 right-0 z-50 bg-dark/90 backdrop-blur-md transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-film text-primary text-2xl"></i>
            <span class="text-xl font-bold text-white">光影世界</span>
        </div>
    </div>
</header>

<main class="min-h-screen pt-16 flex items-center justify-center bg-gradient-to-br from-dark to-dark-light">
    <div class="container mx-auto px-4 md:px-8 lg:px-16 py-12">
        <div class="max-w-md mx-auto bg-dark-light/50 backdrop-blur-md rounded-xl p-8 shadow-card animate-fade-in">
            <h2 class="text-2xl font-bold text-white text-center mb-6">注册</h2>

            <form id="loginForm" class="space-y-6">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-300 mb-2">
                        电子邮箱
                    </label>
                    <div class="relative">
                        <input type="email" id="email" name="email" required
                               class="input-glass w-full py-3 px-10 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                               placeholder="请输入电子邮箱">
                        <i class="fa fa-envelope text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2"></i>
                    </div>
                </div>

                <div>
                    <label for="username" class="block text-sm font-medium text-gray-300 mb-2">
                        用户名
                    </label>
                    <div class="relative">
                        <input type="text" id="username" name="username" required
                               class="input-glass w-full py-3 px-10 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                               placeholder="请输入用户名">
                        <i class="fa fa-user text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2"></i>
                    </div>
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
                        登录密码
                    </label>
                    <div class="relative">
                        <input type="password" id="password" name="password" required
                               class="input-glass w-full py-3 px-10 rounded-full focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all"
                               placeholder="请输入登录密码">
                        <i class="fa fa-lock text-gray-400 absolute left-4 top-1/2 transform -translate-y-1/2"></i>
                    </div>
                </div>

                <!--<div>
                    <label class="block text-sm font-medium text-gray-300 mb-2">
                        是否开通VIP会员
                    </label>
                    <div class="grid grid-cols-2 gap-4">
                        <label id="vipYesLabel" class="flex items-center space-x-2 p-3 rounded-lg cursor-pointer transition-all duration-200 input-glass-radio">
                            <input type="radio" name="role" value="1" class="radio-primary w-5 h-5 text-primary focus:ring-primary/50" onchange="toggleVipLabel(this)">
                            <span>是</span>
                        </label>
                        <label id="vipNoLabel" class="flex items-center space-x-2 p-3 rounded-lg cursor-pointer transition-all duration-200 input-glass-radio">
                            <input type="radio" name="role" value="0" class="radio-primary w-5 h-5 text-primary focus:ring-primary/50" onchange="toggleVipLabel(this)">
                            <span>否</span>
                        </label>
                    </div>
                </div>-->

                <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-full shadow-card-hover flex items-center justify-center space-x-2 transition-all transform hover:scale-[1.02]">
                    <i class="fa fa-right-to-bracket"></i>
                    <span>立即注册</span>
                </button>
            </form>
        </div>
    </div>
</main>

<script>
    // 单选框状态切换
    /*function toggleVipLabel(radio) {
        const yesLabel = document.getElementById('vipYesLabel');
        const noLabel = document.getElementById('vipNoLabel');

        // 移除所有标签的活跃状态
        yesLabel.classList.remove('input-glass-radio-active');
        noLabel.classList.remove('input-glass-radio-active');

        // 添加当前选中标签的活跃状态
        if (radio.value === '1') {
            yesLabel.classList.add('input-glass-radio-active');
        } else {
            noLabel.classList.add('input-glass-radio-active');
        }
    }*/

    // 表单提交处理
    document.getElementById('loginForm').addEventListener('submit', async function(e) {
        e.preventDefault();

        const form = e.target;
        const email = form.email.value;
        const username = form.username.value;
        const password = form.password.value;
        /*const roleInput = document.querySelector('input[name="role"]:checked');
        const role = roleInput ? roleInput.value : null;

        // 验证VIP选项是否已选择
        if (!role) {
            alert('请选择是否开通VIP会员');
            return;
        }*/

        // 显示加载状态
        const submitButton = form.querySelector('button[type="submit"]');
        const originalContent = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';

        try {
            // 发送注册请求
            const response = await fetch('http://localhost:8080/api/user/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    email,
                    username,
                    password
                    //role
                })
            });

            if (!response.ok) {
                throw new Error(`注册失败: ${response.status}`);
            }

            const data = await response.json();

            if (data.code == 200) {
                alert('注册成功！请登录');
                window.location.href = '/video-platform/src/main/resources/templates/login.html';
            } else {
                throw new Error(data.message || '注册失败，请重试');
            }

        } catch (error) {
            console.error('注册错误:', error);
            alert(error.message);
        } finally {
            submitButton.disabled = false;
            submitButton.innerHTML = originalContent;
        }
    });
</script>
</body>
</html>